(function(){
	function autoLayout(dom){
		this.index = dom.children.length;
		if(!this.index){
			return;
		}
		dom.style.position = 'relative';
		for(var i = 0; i < dom.children.length; i++){
			dom.children[i].style.position = 'absolute';
		}
		switch(this.index){
			case 1: 
				dom.children[0].style.width = '100%';
				dom.children[0].style.height = '100%';
				break;
			case 2: 
				dom.children[0].style.width = '66.6%';
				dom.children[0].style.height = '100%';
				dom.children[0].style.webkitClipPath = 'polygon(0% 0%,99% 0%,49% 100%,0% 100%)';
				dom.children[1].style.width = '66.6%';
				dom.children[1].style.height = '100%';
				dom.children[1].style.right = 0;
				dom.children[1].style.webkitClipPath = 'polygon(51% 0%,100% 0%,100% 100%,1% 100%)';
				break;
			case 3: 
				dom.children[0].style.width = '66%';
				dom.children[0].style.height = '100%';
				dom.children[1].style.width = '33%';
				dom.children[1].style.height = '49.5%';
				dom.children[1].style.right = 0;
				dom.children[2].style.height = '49.5%';
				dom.children[2].style.width = '33%';
				dom.children[2].style.bottom = 0;
				dom.children[2].style.right = 0;
				break;
			case 4: 
				dom.children[0].style.width = '49.5%';
				dom.children[0].style.height = '49.5%';
				dom.children[1].style.width = '49.5%';
				dom.children[1].style.height = '49.5%';
				dom.children[2].style.width = '49.5%';
				dom.children[2].style.height = '49.5%';
				dom.children[3].style.width = '49.5%';
				dom.children[3].style.height = '49.5%';
				dom.children[1].style.right = 0;
				dom.children[3].style.right = 0;
				dom.children[2].style.bottom = 0;
				dom.children[3].style.bottom = 0;
				break;
			case 5: 
				dom.children[0].style.width = '66%';
				dom.children[0].style.height = '66%';
				dom.children[1].style.width = '33%';
				dom.children[1].style.height = '33%';
				dom.children[2].style.width = '33%';
				dom.children[2].style.height = '66%';
				dom.children[3].style.width = '33%';
				dom.children[3].style.height = '33%';
				dom.children[4].style.width = '33%';
				dom.children[4].style.height = '33%';
				dom.children[1].style.right = 0;
				dom.children[2].style.right = 0;
				dom.children[2].style.bottom = 0;
				dom.children[3].style.bottom = 0;
				dom.children[4].style.bottom = 0;
				dom.children[4].style.left = '33.3%';
				break;
			case 6: 
				dom.children[0].style.width = '66%';
				dom.children[0].style.height = '66%';
				dom.children[1].style.width = '33%';
				dom.children[1].style.height = '33%';
				dom.children[2].style.width = '33%';
				dom.children[2].style.height = '33%';
				dom.children[3].style.width = '33%';
				dom.children[3].style.height = '33%';
				dom.children[4].style.width = '33%';
				dom.children[4].style.height = '33%';
				dom.children[5].style.width = '33%';
				dom.children[5].style.height = '33%';
				dom.children[1].style.right = 0;
				dom.children[2].style.right = 0;
				dom.children[2].style.top = '33.3%';
				dom.children[2].style.bottom = 0;
				dom.children[3].style.bottom = 0;
				dom.children[4].style.bottom = 0;
				dom.children[4].style.left = '33.3%';
				dom.children[5].style.bottom = 0;
				dom.children[5].style.right = 0;
				break;
		}
	}
	window.autoLayout = autoLayout;
})();

autoLayout(document.getElementsByClassName('wrap')[0]);
autoLayout(document.getElementsByClassName('wrap')[1]);
autoLayout(document.getElementsByClassName('wrap')[2]);
autoLayout(document.getElementsByClassName('wrap')[3]);
autoLayout(document.getElementsByClassName('wrap')[4]);
autoLayout(document.getElementsByClassName('wrap')[5]);
